<template>
  <div>
    <div class="container">
      <!-- 条件查询 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="申请人姓名" >
          <el-input v-model="applyQuery.applyName" placeholder="请输入申请人姓名"></el-input>
        </el-form-item>
        <el-form-item label="审核状态" >
          <!--
            数据类型一定要和取出的json中的一致，否则没法回填
            因此，这里value使用动态绑定的值，保证其数据类型是number
          -->
          <el-select v-model="applyQuery.auditResult" placeholder="请选择审核状态">
            <el-option label="未审核" :value="0"></el-option>
            <el-option label="不通过" :value="2"></el-option>
            <el-option label="已通过" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间" >
          <el-select v-model="applyQuery.beforeDate" placeholder="请选择申请时间">
            <el-option label="1天内" :value="1"></el-option>
            <el-option label="3天内" :value="3"></el-option>
            <el-option label="7天内" :value="7"></el-option>
            <el-option label="30天内" :value="30"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-searcher" @click="searchApplyInfo()">搜索</el-button>
          <el-button type="default" @click="resetData()">清空</el-button>
        </el-form-item>
      </el-form>

      <!--批量操作-->
      <div>
        <el-button type="danger" @click="deleteApplyBatch">删除选中</el-button>
      </div>

      <el-table
          :data="tableData"
          border
          width="100%"
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="date"
                         label="序号"
                         width="50"
                         align="center">
          <!--计算得出序号-->
          <template #default="scope">
            {{ (query.pageIndex - 1) * query.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <!--不显示特征id-->
<!--        <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>-->
        <el-table-column prop="applyName" label="姓名" align="center" width="200"></el-table-column>
        <el-table-column prop="gender" label="性别" width="70" align="center">
          <template #default="scope">
            {{ scope.row.gender===0?'男':'女'}}
          </template>
        </el-table-column>
        <el-table-column prop="birthday" label="出生年月" align="center" width="200" :formatter="formatterTime"></el-table-column>
        <el-table-column prop="idCardNum" label="身份证号" align="center" width="200"></el-table-column>
        <el-table-column prop="auditResult" label="审核状态" width="200" align="center">
          <template #default="scope">
            {{ scope.row.auditResult===0?'未审核':'已审核'}}
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template #default="scope">
            <router-link :to="{name:'ViewApply', params:{id: scope.row.id}}">
              <el-button size="medium" icon="el-icon-edit" id="view-btn" type="primary">查看</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="query.pageIndex"
            :page-size="query.pageSize"
            :total="pageTotal"
            @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import apply from "../../api/admin/admin";

export default {
  data() {
    return {
      query: {
        apply:{
        },
        pageIndex: 1,
        pageSize: 8,
        key:"",
        value:""
      },
      // 查询条件
      applyQuery:{
        applyName: '',
        auditResult: null,
        beforeDate: null
      },
      tableData: [],
      // 选中申请信息
      multipleSelection: [],
      // 选中申请编号
      applyIdSelected: [],
      pageTotal: 0,
      form: {},
      idx: -1,
      id: -1
    };
  },
  created() {
    this.getData();
  },
  methods: {
    //格式化出生年月
    formatterTime(row,column){
      let data = row[column.property]
      return  /\d{4}-\d{1,2}-\d{1,2}/g.exec(data )
    },
    // 获取 easy-mock 的模拟数据
    getData() {
      apply.getAudit(this.query.pageIndex,this.query.pageSize,this.query.apply).then(res => {
        console.log(res);
        this.tableData = res.data.item.records;
        this.pageTotal = res.data.item.total;
      });
    },
    searchApplyInfo(pageIndex = 1) {
      this.query.pageIndex = pageIndex
      apply.searchApplyInfo(this.query.pageIndex, this.query.pageSize, this.applyQuery)
          .then((response) => {
            this.tableData = response.data.item.records;
            this.pageTotal = response.data.item.total;
          }).catch(error => {
        console.log(error);
        this.$message({
          type: 'error',
          message: '获取申请信息失败'
        })
      })
    },
    // 重置搜索栏
    resetData() {
      this.applyQuery.applyName = null;
      this.applyQuery.auditResult = null;
      this.applyQuery.beforeDate = null;
    },
    // 批量删除算法
    deleteApplyBatch() {
      this.$confirm('此操作将删除已审核的申请, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let array = [];
        for (let i = 0; i < this.applyIdSelected.length; i++) {
          let Id = {};
          Id.id = this.applyIdSelected[i]
          array[i] = Id
        }
        array = {array};
        apply.deleteApplyBatch(array).then(response => {
          this.getData();
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
          return response;
        }).catch((response) => {
          this.$message({
            type: 'error',
            message: '删除失败!',
          })
          console.log("error: " + response.message)
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        })
      })
    },

    // 多选操作
    // 当选中发生变化时，将用户编号放入algIdSelected
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.applyIdSelected = [];
      let id = null;
      for (let i = 0; i < this.multipleSelection.length; i++) {
        id = this.multipleSelection[i].id
        this.applyIdSelected[i] = id
      }
      // console.log(this.algIdSelected);
    },

    // 分页导航
    handlePageChange(val) {
      console.log("val=="+val);
      this.query.pageIndex=val;
      this.getData(this.query.log,this.query.pageIndex,this.query.pageSize);
    }
  }
};
</script>

<style scoped>
.container {
  /*边界 20px*/
  margin: 20px;
}
.table {
  width: 100%;
  font-size: 14px;
}
</style>
